<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Login</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="layout" content="main"/>
    <link href="<?php asset_url("css/customize-template.css") ?>" type="text/css" media="screen, projection"
          rel="stylesheet"/>
    <link href="<?php asset_url("dist/ladda-themeless.min.css") ?>" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>

    <style>
        body {
            font-family: 'Muli', sans-serif;
        }

        .control-label {
            font-size: 16px;
        }

        button {
            width: 150px;
        }
    </style>
</head>
<body>
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <div id="app-nav-top-bar" class="nav-collapse"></div>
        </div>
    </div>
</div>
<div id="body-container">
    <div id="body-content">
        <div class='container'>
            <div class="signin-row row">
                <div class="span4"></div>
                <div class="span8">
                    <h1 align="center" style="margin-bottom:0px;">Your Company Name</h1>

                    <div class="container-signin">
                        <legend>Please Login</legend>
                        <form id='loginForm'>
                            <div class="form-inner">
                                <div class="control-group ">
                                    <label class="control-label">Username</label>

                                    <div class="controls">
                                        <input type="text" id="username" name="username" class="span5"
                                               data-validation="required"
                                               data-validation-error-msg="Please Enter Username">
                                    </div>
                                </div>
                                <div class="control-group ">
                                    <label class="control-label">Password</label>

                                    <div class="controls">
                                        <input type="password" id="password" name="password" class="span5"
                                               data-validation="required"
                                               data-validation-error-msg="Please Enter Password">
                                    </div>
                                </div>
                                <div id="status" style="color:red"></div>
                            </div>
                            <footer class="signin-actions">
                                <button id="submit" type="submit" class="btn btn-primary ladda-button"
                                        data-style="slide-right"><span id="submitText">Login</span>

                                </button>
                                <span style="margin-left:50px;"> Forgot Password </span>
                            </footer>
                        </form>
                    </div>
                </div>
                <div class="span3"></div>
            </div>

            <div class="signin-row row">
                <div class="span4"></div>
                <div class="span8">
                    <div class="well well-small well-shadow">
                        <legend class="lead">Additional Information</legend>
                        Add additional content here.
                    </div>
                </div>
                <div class="span8"></div>
            </div>
        </div>
    </div>
</div>
<footer class="application-footer">
    <div class="container">
        <div class="disclaimer">
            <p>Powered By WebsiteApps</p>

            <p>Copyright © WebsiteApps</p>
        </div>
    </div>
</footer>

<script src="<?php asset_url("js/jquery-2.1.0.min.js") ?>"></script>
<script src="<?php asset_url("dist/spin.min.js") ?>"></script>
<script src="<?php asset_url("dist/ladda.min.js") ?>"></script>
<script src="<?php asset_url("validator/jquery.form-validator.min.js") ?>"></script>
<script type="application/javascript">

    $.validate({
        form: '#loginForm',
        validateOnBlur: false,
        onError: function () {
            $("#status").text("");
            return false;
        },
        onSuccess: function ($form) {
            $("#status").text("");
            var submitButton = Ladda.create(document.querySelector('#submit'));
            submitButton.start();
            var handler = $.post("<?php nav_url("login/verify")?>", $("#loginForm").serialize(), function (data) {
                submitButton.stop();
                data = JSON.parse(data);
                if (data.isValid) {
                    $("#submitText").text("Redirecting..");
                    window.location.href = "<?php nav_url('dashbord')?>";
                } else {
                    if (data.message == null) {
                        $("#status").text("Login Failed. Invalid Username or Password.");
                    } else {
                        $("#status").text(data.message);
                    }
                }
                submitButton.stop();
            })
                .error(function (error) {
                    console.log(error.responseText);
                    $("#status").text("CLIENT : Not able to Login. Please Contact Administrator.");
                    submitButton.stop();
                });
            return false;
        }
    });
</script>
</body>
</html>